<template>
  <div class="ml-2 flex-1">
    <a-card :bordered="false" style="height: 830px; width: 1380px">
      <div>
        <span>1.下载批量导入模版</span>
        <a-divider />
      </div>
      <div class="mb-5">
        <div>
          <span>根据提示信息完善表格内容</span>
        </div>
        <a-button
          type="primary"
          :icon="h(DownloadOutlined)"
          class="mt-3"
          @click="downloadTemplate"
          >开关栓状态导入模版.xls</a-button
        >
      </div>
      <div>
        <span>2.导入开关栓状态导入模版</span>
        <a-divider />
      </div>
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        action="/api/ChargeSystem/SFGL/importHeatingState"
        :headers="header"
        @change="handleChange"
        @drop="handleDrop"
        :beforeUpload="beforeUpload"
        accept=".xls,.xlsx,.et"
        class="mt-3"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击/拖拽文件上传</p>
        <p class="ant-upload-hint">请将填写好的文件拖拽至此，或点击选择文件</p>
        <p class="ant-upload-hint">
          (仅支持.xls、.xlsx、.et格式文件，文件大小限制2MB以内)
        </p>
      </a-upload-dragger>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import { h, ref } from "vue";
import { useAccessStore } from '@vben/stores';
import { message } from 'ant-design-vue';
import { DownloadOutlined, InboxOutlined } from "@ant-design/icons-vue";
const fileList = ref([]);
const accessStore = useAccessStore();
const header = {
  Authorization: accessStore.accessToken || localStorage.getItem('token'),
};
const downloadTemplate = () => {
  // 从public目录下下载文件
  // window.location.href = '/public/开关栓状态导入模版.xls';
  const templatePath = "/Execl/开关栓状态导入模版.xlsx";
  const link = document.createElement("a");
  link.href = templatePath;
  link.download = templatePath.split("/").pop() || "";
  document.body.append(link);
  link.click();
  link.remove();
};


const beforeUpload = (file: File) => {
  const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  if (!isExcel) {
    message.error('只能上传 .xls, .xlsx, .et 格式的文件!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('文件大小不能超过 2MB!');
  }
  return isExcel && isLt2M;
};

const handleChange = (info: any) => {
  if (info.file.status === 'done') {
    if (info.file.response && info.file.response.code === 200) {
      message.success(`${info.file.name} 文件上传成功`);
    } else {
      message.error(`${info.file.name} 文件上传失败: ${info.file.response ? info.file.response.message : '未知错误'}`);
    }
  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 文件上传失败.`);
  }
};
</script>
<style scoped>
</style>
